<template>

  <view class="bg-[var(--page-bg-color)] min-h-[100vh]" :style="themeColor()">
    <view class="z-10 fixed top-0 left-0 right-0 ">
      <view class="search-box box-border  h-[100rpx] bg-[#fff]">
        <view class="flex-1 search-input">
          <text @click.stop="searchNameFn" class="nc-iconfont nc-icon-sousuo-duanV6xx1 btn !text-[28rpx]"></text>
          <input class="input" type="text" v-model="searchName" :placeholder="'请输入会员ID/昵称姓名/手机'"
            placeholderClass="text-[var(--text-color-light9)]" @confirm="searchNameFn">
          <text v-if="searchName" class="nc-iconfont nc-icon-cuohaoV6xx1 clear" @click="clearFn"></text>
        </view>

      </view>
      <view class="bg-[var(--page-bg-color)]  p-[20rpx] flex items-center justify-between">
        <view class="text-[36rpx] font-bold">
          {{ total }}人
        </view>
        <view class="w-[300rpx] h-[68rpx]">
          <!-- v-if="checkPermi(['all:member:search'])" -->
          <u-subsection :list="searchType" @change="updateSearchType" mode="button" activeColor="var(--primary-color)"
            :fontSize="16" :current="searchTypeIndex"></u-subsection>
        </view>
      </view>
    </view>

    <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="{ use: false }" @up="getmemberListFn" top="208rpx">
      <view v-for="(item, index) in memberList" :key="index"
        class="sidebar-margin card-template py-0  mb-[var(--top-m)] relative">
        <view @click="handleItemClick(item)">
          <!-- 距今到店 -->
          <view class="absolute right-0 top-[-6rpx] " v-if="item.activeDays">
            <view class="flex items-center badge">
              <view> {{ item.activeDays }}
              </view>
            </view>
          </view>
          <view class="flex items-center h-[160rpx]">
            <view class="w-[100rpx] h-[100rpx] relative">
              <image :src="item.avatar" class="w-[100rpx] h-[100rpx] rounded-[16rpx]"></image>
              <image class="w-[20rpx] h-[20rpx] absolute right-0 bottom-0"
                :src="item.sex == 1 ? 'https://files.meton.vip/09d8d7f71c0df8949ea6922aedd3026cb70db9ba50fe748d969a96e537f18f39.png' : 'https://files.meton.vip/c5c240342d2925853f957ce6a4b5b98f0ecfeadbd500aed3424ad0f733ee7c0f.png'">
              </image>
            </view>
            <view class="flex-1  flex items-center ml-[20rpx]  box-border  border-0">
              <view class="flex-1">
                <view class="text-[36rpx] text-[#333] font-bold flex items-center">
                  <view style="word-break: keep-all;" class="truncate max-w-[200rpx]">
                    {{ item.nickname }}

                  </view>
                  <image class="w-[25rpx] h-[25rpx] " :src="item.memberShip ? item.paidmemberIcon : item.memberIcon">
                  </image>

                </view>
                <view class="text-[30rpx] text-[var(--text-color-light9)] mt-[16rpx] flex items-center">
                  <uni-icons type="phone" size="12" v-if="item.mobile"></uni-icons>
                  {{ mobileConceal(item.mobile) }}
                </view>

              </view>
              <view class="text-right ">

                <view class="text-[30rpx] font-500 price-font truncate max-w-[300rpx] mb-[16rpx]">
                  {{ item.employee }}

                </view>
                <view class="text-[30rpx] font-500 price-font truncate max-w-[300rpx] ">
                  {{ item.tenantName }}
                </view>

              </view>

              <text class="nc-iconfont nc-icon-youV6xx text-[var(--text-color-light9)] ml-[2rpx] !text-[28rpx]"></text>
            </view>
          </view>
        </view>
      </view>
      <mescroll-empty :option="{ tip: '暂无会员档案' }" v-if="!memberList.length && loading"></mescroll-empty>
    </mescroll-body>

  </view>
  <tabbar />
  <!-- 水印 -->
  <watermark></watermark>
</template>

<script setup lang="ts">
import { nextTick, ref } from 'vue'
import { redirect, img, setMember, mobileConceal } from '@/utils/common';
// import { checkPermi } from '@/utils/auth'

import { getUserPage } from '@/app/api/shopMember';
import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';

import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
import { onLoad, onPageScroll, onReachBottom, onShow } from '@dcloudio/uni-app';
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);

const total = ref(0)
const memberList = ref<Array<any>>([]);

const loading = ref<boolean>(false);
const searchName = ref(undefined)
const operationType = ref('look')
/** 搜索类型 */
const searchType = ref([{ name: '本店', value: 0 }, { name: '所有', value: 1 }])
const searchTypeIndex = ref(0)
const updateSearchType = (index: number) => {
  searchTypeIndex.value = index;
  getMescroll().resetUpScroll();
}
const toCall = (phoneNumber: any) => {
  uni.makePhoneCall({
    phoneNumber: phoneNumber //仅为示例
  });
}
// 搜索名字
const searchNameFn = () => {
  getMescroll().resetUpScroll();
}
const clearFn = () => {
  searchName.value = undefined;
  getMescroll().resetUpScroll();
}

const getmemberListFn = (mescroll: any) => {
  let data = {
    pageNo: mescroll.num,
    pageSize: mescroll.size,
    mobile: searchName.value,
    status: 0,
    tenantIds: searchTypeIndex.value == 0 ? [uni.getStorageSync('wap_tentant_id')] : undefined,
  };
  loading.value = false;

  getUserPage(data).then((res: any) => {
    let newArr = res.data.list;
    total.value = res.data.total
    mescroll.endSuccess(newArr.length);
    //设置列表数据
    if (mescroll.num == 1) {
      memberList.value = []; //如果是第一页需手动制空列表
    }
    memberList.value = memberList.value.concat(newArr);
    loading.value = true;
  }).catch(() => {
    loading.value = true;
    mescroll.endErr(); // 请求失败, 结束加载
  })
}


const lookMemberFn = () => {

  const url = `/addon/shopMemberInfo/pages/index`
  redirect({ url, param: {} })
}
const handleItemClick = (item: any) => {
  if (operationType.value == 'selected') {
    setMember(item)
  } else {
    uni.setStorageSync('wapShopMember', item)

    lookMemberFn()
  }


};

onShow(() => {
  nextTick(() => {

    if (getMescroll()) { getMescroll().resetUpScroll(); }
  })

})
onLoad((option: any) => {
  operationType.value = option.type || 'look';

});
</script>

<style lang="scss" scoped>
:deep(.type-class .u-popup .u-transition) {
  top: 86rpx !important;
}

.search-box {
  display: flex;
  align-items: center;
  padding: 0 30rpx;
}

.badge {
  position: relative;
  /* 基础圆角，可按需微调 */
  /* 黑色背景，可调整透明度等 */
  display: flex;
  background-color: #2B2825;
  color: #fff;
  padding: 4rpx 10rpx;
  border-top-right-radius: 20rpx;
  border-bottom-left-radius: 20rpx;
  font-size: 20rpx;
  display: inline-flex;
  align-items: center;
}
</style>
